<template>
	<view>
		<view class="header">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<image src="/static/images/1.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image src="/static/images/2.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image src="/static/images/3.jpg"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="content">
			<view class="grid-item">
				<text class="iconfont icon-meishi" ></text>
				<view>美食</view>
			</view>
			<view class="grid-item">
				<text class="iconfont icon-zhuangxiu"></text>
				<view>装修</view>
			</view>
			<view class="grid-item">
				<text class="iconfont icon-xiyu"></text>
				<view>洗浴</view>
			</view>
			<view class="grid-item">
				<text class="iconfont icon-qiche"></text>
				<view>汽车</view>
			</view>
			<view class="grid-item">
				<text class="iconfont icon-changge"></text>
				<view>唱歌</view>
			</view>
			<view class="grid-item">
				<text class="iconfont icon-zhusu"></text>
				<view>住宿</view>
			</view>
			<view class="grid-item">
				<!-- //对应iconfont.css中的样式文件名一致 ，引入的样式文件名更新了，所以引用不成功-->
				<!-- 小袁  2025-10-13日 更新把clsss中的文件名称与iconfont.css样式名称一致就可以引入样式了 -->
				<text class="iconfont icon-icon-test"></text>
				<view>学习</view>
			</view>
			<view class="grid-item">
				<text class="iconfont icon-gongzuojingyan"></text>
				<view>工作</view>
			</view>
			<view class="grid-item">
				<text class="iconfont icon-wedding"></text>
				<view>结婚</view>
			</view>	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
					
				
				
			};
		}
	}
</script>

<style lang="scss">
	@import "/static/iconfont/iconfont.css";//引入css文件得导入方式
	// @import url("/static/iconfont/iconfont.css");
	swiper{
		width:750rpx;
		height:400rpx;
	image{
		width:100%;
		height:100%
		}
	}
	
	.content{
		// display: flex;
		// flex-wrap:wrap;
		// height:100%;
		
		// //  设置每一个格子的属性
		// view{
		// 	width: calc((750rpx - 8px)/3);
		// 	/* 设置每个九宫格的宽度*/
		// 	height: 200rpx;
		// 	background-color: #fff;
		// 	/* 格子背景色 */
		// 	display: flex;
		// 	/* 在格子内部进行布局 */
		// 	flex-direction: column;
		// 	/* 使容器内的子元素垂直排列 *
		// 	justify-content: center;
		// 	/* 格子内容水平居中 */
		// 	align-items: center;
		// 	/* 格子内容垂直居中 */
		// 	border: 1rpx solid rgb(219,219,219);
		// 	margin: 1rpx 1rpx 0rpx 1rpx;	
		// }
		display: grid;
		grid-template-columns: repeat(3,1fr);
		grid-template-rows: repeat(3,1fr);
		gap:1rpx;
		padding: 1rpx;
	}
		.grid-item{
			background-color: #fff;
			display:flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 100px;
			border: 1rpx solid rgb(219,219,219);
		}
		.iconfont{
			box-sizing:border-box;
			padding: 30rpx 24rpx;
			display: block;
			font-size: 72rpx;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;	
	}

</style>
